import React, { PureComponent } from 'react';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import {
  Row, Col, Form, Input, Select, Icon, Dropdown, InputNumber, DatePicker, Modal, message,
  Table, Alert, Badge, Divider, Card, Menu, Button, Popconfirm, Collapse, Carousel, Tree, Switch,
  List, Avatar, Tooltip,
} from 'antd';
import { OrderTable, OperatorButton } from '..';
import styles from './index.less';
import syStyles from '../index.less';

const getValue = obj => Object.keys(obj).map(key => obj[key]).join(',');
export default class BasicList extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      breadcrumbList: [],
      baseModel: '',
      initSortion: { sortField: 'id', sortOrder: 'desc', },
      initPagination: { pageSize: 2, current: 1, },
      initCriteriaQuery: {},
      queryUrl: '',
      fetchUrl: '',
      dataTable: {
        columnWrap: [],
        bordered: false,
      },

      selectedRows: [],
      selectedRowKeys: [],
      editedEntity: {},
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const { initCriteriaQuery, initPagination, initSortion,
      baseModel, queryUrl, fetchUrl, } = this.state;

    // 组件渲染完后进行数据查询
    dispatch({
      type: baseModel + (fetchUrl ? fetchUrl : '/fetch'),
      payload: {
        ...initPagination,
        ...initSortion,
        ...initCriteriaQuery,
        queryUrl: queryUrl,
      }
    });
  }


  /* ****************************************** 表格事件处理 ****************************************** */

  handleTableChange = (pagination, filtersArg, sorter) => {
    const { initCriteriaQuery, initPagination, initSortion,
      baseModel, queryUrl, fetchUrl, } = this.state;

    const { dispatch } = this.props;
    const { searchFormValues } = this.state;

    // 表头筛选，展示不用
    // const filters = Object.keys(filtersArg).reduce((obj, key) => {
    //   const newObj = { ...obj };
    //   newObj[key] = getValue(filtersArg[key]);
    //   return newObj;
    // }, {});

    const params = {
      ...pagination,
      ...initSortion,
      ...initCriteriaQuery,
      ...searchFormValues,
      // ...filters,
      queryUrl: queryUrl,
    };
    if (sorter.field) {
      params.sortField = sorter.field;
      params.sortOrder = sorter.order.replace("end", "");
    }

    dispatch({
      type: baseModel + (fetchUrl ? fetchUrl : '/fetch'),
      payload: params,
    });
  }

  handleSelectionChange = (selectedRowKeys, selectedRows) => {
    if (selectedRows.length > 0) {
      this.setState({ editedEntity: selectedRows[0] });
    } else {
      this.setState({ editedEntity: {} });
    }
    this.setState({ selectedRowKeys, selectedRows });
  }

  /* ****************************************** 渲染操作区域 ****************************************** */

  handleOperatorBind = () => {
    // console.log(this.state.editedEntity);
  }

  renderOperatorBlock = () => {
    const { selectedRows } = this.state;

    return (
      <div className={styles.operatorBlock}>

        <Button className={styles.operatorButton} icon="plus-square-o" type="dashed"
          onClick={this.handleOperatorBind}
        >
          新 增
        </Button>


        <Button className={styles.operatorButton} icon="edit" type="" disabled={selectedRows.length != 1} >编 辑</Button>
        <Button className={styles.operatorButton} icon="delete" type="danger" disabled={selectedRows.length <= 0} >删 除</Button>
        <Button className={styles.operatorButton} icon="save" type="" >操 作</Button>

      </div>
    );
  }

  /* ****************************************** 渲染 ****************************************** */

  render() {
    const { breadcrumbList, dataTable } = this.state;
    const { columnWrap, bordered, size: tableSize, needAlert, needCheckbox } = dataTable;
    const { modelState: { loading: dataLoading, data, pagination } } = this.props;

    return (
      <PageHeaderLayout title="" breadcrumbList={breadcrumbList}>

        <Card className={syStyles.blockPanel}  >

          {this.renderOperatorBlock()}

          <OrderTable
            loading={dataLoading}
            columnWrap={columnWrap}
            dataSource={data}
            bordered={bordered}
            size={tableSize}
            needAlert={needAlert}
            needCheckbox={needCheckbox}
            pagination={pagination}
            onChange={this.handleTableChange}
            onSelectionChange={this.handleSelectionChange}
          />
        </Card>


        {/* <Modal className={styles.modalForm}
          title={modalTitle}
          visible={modalVisible}
          onCancel={() => this.handleOperator()}
          onOk={this.handleModalSubmit}
          width={800}
          destroyOnClose={true}
          confirmLoading={operatorLoading}
        >
          {this.state.currentRenderForm()}

        </Modal> */}



      </PageHeaderLayout>
    );
  }

}